<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>feedback-ui-design</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="panel-container" id="panel">
        <div class="send-page">
            <strong>
                How satisfied are you with our <br> customer support performance?
            </strong>
            <div class="ratings-container">
                <div class="rating">
                    <div class="rating-item">
                        <svg t="1661053977276" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6042" width="40" height="40"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m0-85.333334a341.333333 341.333333 0 1 0 0-682.666666 341.333333 341.333333 0 0 0 0 682.666666z m-213.333333-128a213.333333 213.333333 0 0 1 426.666666 0h-85.333333a128 128 0 0 0-256 0H298.666667z m42.666666-256a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m341.333334 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z" p-id="6043" fill="#e0620d"></path></svg>
                    </div>
                    <small>Unhappy</small>
                </div>
                <div class="rating">
                    <div class="rating-item">
                        <svg t="1661053929399" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5329" width="35" height="35"><path d="M512 1024c282.76736 0 512-229.23264 512-512s-229.23264-512-512-512-512 229.23264-512 512 229.23264 512 512 512zM512 96.01024c229.74464 0 416.01024 186.24512 416.01024 416.01024s-186.24512 416.01024-416.01024 416.01024-416.01024-186.24512-416.01024-416.01024 186.24512-416.01024 416.01024-416.01024zM256 320c0 35.34848 28.65152 64 64 64s64-28.65152 64-64-28.65152-64-64-64-64 28.65152-64 64zM640 320c0 35.34848 28.65152 64 64 64s64-28.65152 64-64-28.65152-64-64-64-64 28.65152-64 64zM384 704l256 0 0 64-256 0 0-64z" p-id="5330" fill="#e0620d"></path></svg>
                    </div>
                    <small>Neutral</small>
                </div>
                <div class="rating active">
                    <div class="rating-item">
                        <svg t="1661053488990" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3636" width="40" height="40"><path d="M512 128c52 0 102.4 10.4 149.6 30.4 45.6 19.2 86.4 47.2 122.4 82.4s63.2 76 82.4 122.4c20 47.2 30.4 97.6 30.4 149.6s-10.4 102.4-30.4 149.6c-19.2 45.6-47.2 86.4-82.4 122.4s-76.8 63.2-122.4 82.4c-47.2 20-97.6 30.4-149.6 30.4s-102.4-10.4-149.6-30.4C316.8 848 276 820 240 784.8s-63.2-76.8-82.4-122.4C138.4 614.4 128 564 128 512s10.4-102.4 30.4-149.6C177.6 316.8 204.8 276 240 240s76-63.2 122.4-82.4C409.6 138.4 460 128 512 128m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM288 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m320 0.8c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28-64 64zM512 768c46.4 0 92-15.2 132-44.8 37.6-28 68.8-67.2 91.2-114.4 8-16 0.8-35.2-15.2-42.4-16-8-35.2-0.8-42.4 15.2-17.6 37.6-43.2 68.8-72 90.4-28 20.8-60.8 32-93.6 32s-64.8-11.2-93.6-32.8c-28.8-21.6-53.6-52.8-72-90.4-8-16-27.2-22.4-42.4-15.2-16 8-22.4 26.4-15.2 42.4 22.4 47.2 54.4 86.4 91.2 114.4 40 30.4 85.6 45.6 132 45.6z" p-id="3637" fill="#e0620d"></path></svg>
                    </div>
                    <small>Satisfied</small>
                </div>
            </div>
            <button class="btn" type="button" id="send">Send Review</button>
        </div>
        <div class="receive-page hide">
            <div class="heart"></div>
            <strong>Thank You!</strong>
            <br>
            <strong>Feedback: <span id="selectRating" class="selectRating"></span></strong>
            <p>We'll use your feedback to improve our customer support</p>
            <button class="btn" type="button" id="back">back Send</button>
        </div>
    </div>
</body>
<script src="./script.js"></script>
</html>